import type { PlusColumn, FieldValues } from "plus-pro-components";
import type { FormRules } from "element-plus";
import { ref, h, computed } from "vue";
import { useTable } from "plus-pro-components";
import { ElAlert } from "element-plus";
import { IconSelect } from "@/components/ReIcon";
import { findValuePath } from "@/utils/truncate";
import { getMenuTagType, getMenuTypeOptions, getMenuTypeTips } from "./enums";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import $request from "./request";

// 表单数据
export const formData = ref<FieldValues>();

export const { buttons } = useTable();
export const tableColumns: PlusColumn[] = [
  {
    label: "菜单名称",
    minWidth: 200,
    prop: "menuName",
    tableColumnProps: {
      showOverflowTooltip: true
    },
    render(value, data) {
      return h("span", [
        h(useRenderIcon(data.row.icon), {
          style: {
            display: "inline-block",
            position: "relative",
            top: "2px",
            marginRight: "2px",
            color: "#aaa"
          }
        }),
        h(
          "span",
          {
            style: {
              marginLeft: "3px"
            }
          },
          value
        )
      ]);
    }
  },
  {
    label: "类型",
    width: 80,
    prop: "type",
    valueType: "tag",
    fieldProps: (value: string) => {
      return {
        type: getMenuTagType(value),
        effect: "plain"
      };
    },
    tableColumnProps: {
      align: "center"
    },
    hideInSearch: true
  },
  {
    label: "名称标识",
    width: 190,
    prop: "routeName",
    tableColumnProps: {
      showOverflowTooltip: true
    }
  },
  {
    label: "路由地址",
    width: 190,
    prop: "path",
    tableColumnProps: {
      showOverflowTooltip: true
    },
    hideInSearch: true
  },
  {
    label: "状态",
    width: 70,
    prop: "status",
    valueType: "select",
    options: [
      {
        label: "显示",
        value: true,
        color: "green"
      },
      {
        label: "隐藏",
        value: false,
        color: "red"
      }
    ]
  }
];

// 按钮
buttons.value = [
  {
    text: "编辑",
    code: "update",
    props: { type: "primary", plain: true }
  },
  {
    text: "新增",
    code: "add",
    props: { type: "success", plain: true }
  },
  {
    text: "删除",
    code: "delete",
    props: { type: "danger", plain: true },
    confirm: {
      title: "系统提示",
      message: ({ row }) => {
        return `确定删除菜单“${row.menuName}”吗？`;
      }
    }
  }
];

// 表单数据转换
export const formDataTransform: FormDataTransform = {
  // 初始化表单数据
  async initForm(options) {
    const parentData = await $request.get.parentsOptions();
    if (options?.id) {
      // 编辑
      const data = await $request.get.detail(options.id as number);
      return {
        ...data,
        parent: findValuePath(parentData, data.parentId),
        address: data.type === "menu" ? data.component : data.frameSrc
      };
    } else {
      // 添加
      return {
        type: "menu",
        parent: options?.type ? findValuePath(parentData, options?.type) : [],
        sort: 99,
        status: true,
        showParent: true,
        keepAlive: true,
        hiddenTag: false
      };
    }
  },
  // 转化准备提交的表单数据
  transForm(options, formData) {
    return {
      ...formData,
      parent: undefined,
      parentId:
        formData.parent.length > 0 ? formData.parent[formData.parent - 1] : 0,
      component: formData.type === "menu" ? formData.address : "",
      frameSrc: formData.type === "iframe" ? formData.address : ""
    };
  }
};

// 获取表单信息
export const getFormColumns = (options: FormModalOptions): PlusColumn[] => {
  return [
    {
      label: "菜单类型",
      prop: "type",
      valueType: "radio",
      options: getMenuTypeOptions(),
      renderExtra: () =>
        h(ElAlert, {
          title: computed(() => getMenuTypeTips(formData.value.type as string))
            .value,
          type: "info"
        }),
      colProps: { span: 24 }
    },
    {
      label: "上级菜单",
      prop: "parent",
      valueType: "cascader",
      fieldProps: {
        placeholder: "顶级菜单",
        props: {
          checkStrictly: true
        }
      },
      options: () =>
        $request.get.parentsOptions({
          removes: [options?.id]
        }),
      colProps: { span: 24 }
    },
    {
      label: "菜单名称",
      prop: "menuName",
      valueType: "input"
    },
    {
      label: "标识名称",
      prop: "routeName",
      tooltip: "标识名称必须唯一",
      valueType: "input"
    },
    {
      label: computed(() =>
        formData.value.type === "link" ? "组件地址" : "路由地址"
      ),
      prop: "path",
      valueType: "input",
      hideInForm: computed(() => formData.value.type === "button")
    },
    {
      label: computed(() =>
        formData.value.type === "menu" ? "组件地址" : "链接地址"
      ),
      prop: "address",
      valueType: "input",
      hideInForm: computed(
        () => !["menu", "iframe"].includes(formData.value.type as string)
      )
    },
    {
      label: "路由重定向",
      prop: "redirect",
      valueType: "input",
      hideInForm: computed(() => formData.value.type !== "menu")
    },
    {
      label: "菜单图标",
      prop: "icon",
      valueType: "input",
      hideInForm: computed(() => formData.value.type === "button"),
      renderField: (_, onChange) => {
        return h(IconSelect, { onChange });
      }
    },
    {
      label: "父级菜单",
      prop: "showParent",
      valueType: "radio",
      options: [
        {
          label: "显示",
          value: true
        },
        {
          label: "隐藏",
          value: false
        }
      ],
      hideInForm: computed(() => formData.value.type === "button")
    },
    {
      label: "缓存页面",
      prop: "keepAlive",
      valueType: "radio",
      options: [
        {
          label: "缓存",
          value: true
        },
        {
          label: "不缓存",
          value: false
        }
      ],
      hideInForm: computed(
        () => !["menu", "iframe"].includes(formData.value.type as string)
      )
    },
    {
      label: "标签页",
      prop: "hiddenTag",
      valueType: "radio",
      options: [
        {
          label: "显示",
          value: false
        },
        {
          label: "隐藏",
          value: true
        }
      ],
      hideInForm: computed(
        () => !["menu", "iframe"].includes(formData.value.type as string)
      )
    },
    {
      label: "备注",
      prop: "remark",
      valueType: "textarea",
      colProps: { span: 24 }
    },
    {
      label: "菜单",
      prop: "status",
      tooltip: "设置隐藏后菜单不会显示在左侧列表中",
      valueType: "radio",
      options: [
        {
          label: "显示",
          value: true
        },
        {
          label: "隐藏",
          value: false
        }
      ],
      hideInForm: computed(() => formData.value.type === "button")
    },
    {
      label: "排序",
      prop: "sort",
      tooltip: "序号越小排名越靠前",
      valueType: "input-number"
    }
  ];
};

// 验证
export const formRules: FormRules = {
  menuName: [
    {
      required: true,
      message: "请输入菜单名称",
      trigger: "blur"
    }
  ],
  roleName: [
    {
      required: true,
      message: "请输入标识名称",
      trigger: "blur"
    }
  ],
  path: [
    {
      required: true,
      message: "请输入地址",
      trigger: "blur"
    }
  ],
  frameSrc: [
    {
      required: true,
      message: "请输入地址",
      trigger: "blur"
    }
  ]
};
